<template>
  <div id="app2">
    <p>一、Vue自定义组件</p>
    <baseAddNum mydata="自定义数据"></baseAddNum>
    <baseAddNum v-bind:mydata="msg1" v-on:myevent="changeMsg"></baseAddNum>
    <p>组件值传递：父传子通过props，子传父通过$emit，同级传值通过function参数，其他传值方式可通过vuex状态管理器</p>
    <p>组件还可以通过slot插槽传递数据</p>
    <p>二、打开新的浏览器标签</p>
    <router-link target="_blank" :to="{path:'/2'}">新页面打开2页</router-link>
    <p>三、路由</p>
    <p>通过this.$route.path获取当前路由</p>
    <p>this.$router.push 、replace 、go区别：push有历史记录 可以回退，replace无历史记录，go前进或在后退多少go(1),go(-2)</p>
    <p>嵌套router</p>
    <router-view></router-view>
    <router-link :to="{ path: '2/mt2child1' }">链接子路由</router-link><br/>
    <router-link :to="{ path: '/mt-debug/3' }">链接到其他组件路由</router-link>

  </div>
</template>

<script>
  export default {
    name: 'vue2',
    data() {
      return {
        msg1:"xxx"
      }
    },
    methods: {
      changeMsg: function ()  {
        this.msg1 = Math.random() + "";
      }
    }
  }
</script>
